<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head th:include="common/header"></head>
<body>
	<div class="layui-fluid">

		<!-- 导航菜单 -->
		<div th:replace="common/system/system_fragment :: system_menu('系统管理')"></div>

		<!-- 当前位置 -->
		<div th:replace="common/system/system_fragment :: system_locations('系统管理', '角色管理', '编辑信息')"></div>

		<div class="layui-row  yy-margin-top-10">


			<fieldset>
				<legend>
					<a>基本信息</a>
				</legend>
				<form class="layui-form" action="/role/saverole" method="post">
					<!-- 查询 -->
					<div class="layui-colla-item">
						<div class="layui-form layui-form-pane">
							<input type="hidden" name="id" th:value="${role.id}" id="roleid">

							<!-- 角色名称 -->
							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">名称</label>
								<div class="layui-input-block">
									<input th:value="${role.name}" type="text" name="name"
										autocomplete="off" class="layui-input"
										lay-verify="required|length50" placeholder="请输入角色名称">
								</div>
							</div>

							<!-- 角色名称 -->
							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">顺序</label>
								<div class="layui-input-block">
									<input th:value="${role.seq}" type="text" name="seq"
										autocomplete="off" class="layui-input"
										lay-verify="required|number" placeholder="请输入角色顺序"
										maxlength="2">
								</div>
							</div>

							<!-- 角色备注 -->
							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">备注</label>
								<div class="layui-input-block">
									<input th:value="${role.remark}" type="text" name="remark"
										autocomplete="off" class="layui-input"
										lay-verify="maxlength200" placeholder="请输入备注">
								</div>
							</div>

							<div class="layui-form-item">
								<label class="layui-form-label layui-bg-orange">选择权限</label>
								<div class="layui-input-block">
									<ul id="tree" class="ztree"></ul>
								</div>
							</div>

							<input type="hidden" name="permissionIds" id="permissionIds" lay-verify="permissionIds">

							<!-- 提交及取消按钮 -->
							<div class="layui-form-item">
								<div class="layui-input-block">
									<a class="layui-btn yy-float-right" href="javascript:history.go(-1);">返回</a>
									<button class="layui-btn yy-float-right yy-margin-right-10" lay-submit="" lay-filter="role">确定</button>
								</div>
							</div>

						</div>
					</div>
				</form>
			</fieldset>
		</div>
	</div>

	<!-- 引入js -->
	<div th:replace="common/script"></div>

	<script type="text/javascript">
		/*<![CDATA[*/

		var setting = {
			async : {
				enable : true,
				dataType : "json",
				autoParam : [ "id" ],
				url : "/permission/roleAlreadyHavePermissions/" + $("#roleid").val(),
			},
			data : {
				simpleData : {
					enable : true,
					idKey : "id",
					pIdKey : "parentid",
					rootPId : "-1"
				}
			},
			view : {
				selectedMulti : false,
				showLine : true,
				showTitle : true,
				expandSpeed : 'slow'
			},
			check : {
				enable : true,
				chkStyle : "checkbox",
				chkboxType : {
					"Y" : "ps",
					"N" : "ps"
				}
			},
			treeId : "tree",
			callback : {
				onAsyncSuccess : function(event, treeId, treeNode, treeArr) {
					var zTree = $.fn.zTree.getZTreeObj("tree");
					expandNodes(zTree.getNodes());
				}
			}
		};

		//展开节点
		function expandNodes(nodes) {
			var zTree = $.fn.zTree.getZTreeObj("tree");
			if (nodes != undefined) {
				for (var i = 0, l = nodes.length; i < l; i++) {
					var node = nodes[i];
					zTree.expandNode(node, true, false, false);//展开节点就会调用后台查询子节点
					if (node.isParent && node.zAsync) {
						expandNodes(node.children);//递归	
					}
				}
			}
		}

		$(function() {
			//初始化权限树
			$.fn.zTree.init($("#tree"), setting);

		});

		;
		!function() {
			//初始化副文本编辑器
			var form = layui.form;

			form.verify({
				permissionIds : function(value) {

					var treeObj = $.fn.zTree.getZTreeObj("tree");
					var nodes = treeObj.getCheckedNodes(true);

					if (nodes != null && nodes.length > 0) {
						var ids = "";
						for (var i = 0; i < nodes.length; i++) {
							if (i > 0) {
								ids += ",";
							}
							ids += nodes[i].id;
						}
					} else {
						return "请选择权限!";
					}
					$("#permissionIds").val(ids);
				}
			});

			//表单提交事件
			form.on('submit(role)', function(data) {
				
				$.logs.info(permissionIds);
				
				$.http.submitForm({
					url : "/role/saverole",
					data : data.field,
					success : function(r) {
						if (r && r.success) {
							$.prompt.alert(r.msg, "/role/roleList");
						} else {
							$.prompt.alert(r.msg, null);
						}
					}
				});

				return false; //阻止表单跳转。因为使用ajax所以这里阻止表单的自动跳转
			});

		}();

		/*]]>*/
	</script>
</body>

</html>